<template>
<div class="auth-wrapper d-flex no-block justify-content-center align-items-center bg-dark">
  <div class="auth-box bg-dark border-top border-secondary">
    <div id="loginform">
      <div class="text-center p-t-20 p-b-20">
        <span class="db"><img src="../assets/images/logo.png" alt="logo" /></span>
      </div>
      <!-- Form -->
      <form class="form-horizontal m-t-20" id="loginform" @submit.prevent="submit" autocomplete="off">
        <div class="row p-b-30">
          <div class="col-12">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text bg-success text-white" id="basic-addon1"><i class="ti-user"></i></span>
              </div>
              <input type="text" name="name" v-model.trim.lazy="$v.name.$model" class="form-control form-control-lg" placeholder="用户名"
                aria-label="用户名" aria-describedby="basic-addon1">
            </div>

            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text bg-warning text-white" id="basic-addon2"><i class="ti-pencil"></i></span>
              </div>
              <input type="password" name="pwd" v-model.trim.lazy="$v.pwd.$model" class="form-control form-control-lg" placeholder="密码"
                aria-label="密码" aria-describedby="basic-addon2">
            </div>

          </div>
        </div>
        <div class="row border-top border-secondary">
          <div class="col-12">
            <div class="form-group">
              <div class="p-t-20">
                <button class="btn btn-info hide" id="to-recover" type="button">
                  <i class="fa fa-lock m-r-5"></i> Lost password?
                </button>
                <button class="btn btn-success float-right" id="login-submit-btn" type="submit" :disabled="submitStatus === 'PENDING'">登 录</button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div id="recoverform">
      <div class="text-center">
        <span class="text-white">Enter your e-mail address below and we will send you instructions how to recover a password.</span>
      </div>
      <div class="row m-t-20">
        <!-- Form -->
        <form class="col-12" action="index.html">
          <!-- email -->
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text bg-danger text-white" id="basic-addon1"><i class="ti-email"></i></span>
            </div>
            <input type="text" class="form-control form-control-lg" placeholder="Email Address" aria-label="Username" aria-describedby="basic-addon1">
          </div>
          <!-- pwd -->
          <div class="row m-t-20 p-t-20 border-top border-secondary">
            <div class="col-12">
              <a class="btn btn-success" href="#" id="to-login" name="action">Back To Login</a>
              <button class="btn btn-info float-right" type="button" name="action">Recover</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'
  import { required } from 'vuelidate/lib/validators'

  var data = {
    name: "",
    pwd: "",
    submitStatus: null
  }

  var validations = {
    name: {
      required
    },
    pwd: {
      required
    }
  }
  var submit = function() {
    this.$v.$touch()
    if (this.$v.$invalid) {
      return;
    }
    var $login = $("#login-submit-btn");
    if (!$login.lock()) {
      return;
    }
    $login.loadMsg("正在登录...");
    var $router = this.$router;
    $.ajax({
      contentType: 'application/json; charset=UTF-8',
      url: cfg.serverPath + "/admin/login",
      type: "post",
      data: JSON.stringify(data),
      success: function(result) {
        if (result.status != 0) {
          $login.failMsg(result.message);
          return;
        }
        $login.hideMsg();
        $router.go(-1);
      }
    });
  }
  export default {
    data() {
      return data;
    },
    validations,
    methods: {
      submit
    }
  };
</script>
<style>
</style>